间距#

padding 属性用于设置视图内容与其边缘之间的间距，相当于 SwiftUI 中的 padding 修饰符。它有助于视图之间的分隔与整体布局美观。

定义#

1padding?: true | number | {
2  horizontal?: number | true
3  vertical?: number | true
4  leading?: number | true
5  trailing?: number | true
6  top?: number | true
7  bottom?: number | true
8}

支持的写法#

1. 默认边距#

1padding: true

为所有边应用系统默认的内边距。

示例：#

1<Text padding={true}>
2  默认边距
3</Text>

2. 统一边距#

1padding: 8

为所有边设置相同的数值边距。

示例：#

1<VStack padding={12}>
2  <Text>统一边距</Text>
3</VStack>

3. 指定边距对象#

可以分别设置特定方向的边距。

1padding: {
2  horizontal: 16,
3  vertical: 8
4}

可用属性说明：#

每个值可以是具体数值，也可以是 true，true 表示使用系统默认边距。

示例：#

1<Text
2  padding={{
3    top: 10,
4    bottom: 10,
5    horizontal: 16
6  }}
7>
8  自定义边距
9</Text>

使用 true 设置特定边：#

1<Text
2  padding={{
3    top: true,
4    horizontal: 12
5  }}
6>
7  混合边距
8</Text>

注意事项#

• padding 不会直接改变视图内容的大小，但会影响它与外部内容之间的间距。
• 可以灵活组合 horizontal / vertical 与 leading / top 等单项配置，单项配置会覆盖对应方向的组合配置。
• 合理使用 padding 能提升界面排版的整洁性与可读性。